<script src="../ExternalLibrary/js/vue.js"></script>
<!-------------------------数据改变,视图渲染start--------------------->
<fieldset>
    <legend>01,vue实例：数据与方法</legend>
    <div>查看console</div>
    <script type="text/javascript">
        /**
        *   每个Vue实例都会代理其data对象里所有的属性
        */

        //我们的数据对象
        var date = {a:1} //其实就是一个json对象

        //该对象被加入到一个Vue实例中
        var vm = new Vue({
            data:date
        });

        //获得这个实例上的属性
        //返回源数据中对应的字段
        console.log("vue实例属性的值是===》"+vm.a);

        //设置对象属性的值,也将影响到原始数据
        vm.a = "申倚光"
        console.log("设置属性值之后,原始数据是===》"+date.a);

        //设置原始数据的值,也将影响到对象属性的值
        date.a="ytt789"
        console.log("设置原始数据的值后,对象属性的值是===》"+vm.a);

        /**
        *总结:当数据改变时,视图会重新渲染(只有改变对象中存在的属性才会渲染).
        *<==>只有被代理的属性是响应的，如果在实例创建之后添加新的属性,不会触发视图更新
        *
        **/
    </script>
</fieldset>
<!-------------------------数据改变,视图渲染end--------------------->

<!-------------------------数据改变,视图渲染start--------------------->
<fieldset>
    <legend>02.Vue实例自带的属性和方法</legend>
    <p id="watch">{{a}}</p>
    <script>
        var data = {
            a:"1"
        }

        var vm = new Vue({
            el:"#watch",
            data:data
        })

        console.log(vm.$data===data);//true
        console.log(vm.$el===document.getElementById('watch'));//true
        //$watch是一个实例方法[只要有美元符,表明这是一个vue内部属性]
        vm.$watch("a",function(newVal,oldVal){
            //这个回调将在‘vm.a’改变后调用(conole改变值，查看效果)
            console.log("在vm.a的值改变之后调用");//如果每次都赋相同的值,则只在第一次发生改变时调用。
        })
    </script>
</fieldset>

<!-------------------------数据改变,视图渲染end--------------------->